<template>
  <div class="component-addcontract">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>分包合同
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="component-main">
        <div class="component-main-left">
          <div class="box1">
            <span class="iconfont">&#xe67e;</span>
            <span>基本信息</span>
            <div class="arrow"></div>
          </div>
        </div>

        <!-- 表单部分 -->
        <div class="component-main-right">
          <div class="box">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <el-form-item label="关联框架合同名称：" prop="userTruename" label-width="150px">
                <el-select
                  v-model="ruleForm.userTruename"
                  placeholder="全部"
                  style="width:300px"
                  @change="changes"
                >
                  <el-option
                    v-for="(item, index) in items"
                    :key="index"
                    :value="item.conId"
                    :label="item.conName"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="甲方公司名称：" prop="one" label-width="150px">
                <el-input v-model="ruleForm.one" disabled style="width:300px"></el-input>
              </el-form-item>

              <el-form-item label="乙方公司名称：" prop="second" label-width="150px">
                <el-select
                  v-model="ruleForm.second"
                  placeholder="全部"
                  style="width:300px"
                  @change="changes"
                >
                  <el-option
                    v-for="(item, index) in itemss"
                    :key="index"
                    :value="item.orgId"
                    :label="item.orgName"
                  ></el-option>
                </el-select>
              </el-form-item>


               <el-form-item label="分包合同编号：" prop="userOrg1" label-width="150px">
                <el-input style="width:300px" v-model="ruleForm.userOrg1" clearable></el-input>
              </el-form-item>


              <el-form-item label="内部合同编号：" prop="userOrg" label-width="150px">
                <el-input style="width:300px" v-model="ruleForm.userOrg" clearable></el-input>
              </el-form-item>


              <el-form-item label="合同名称：" prop="userName" label-width="150px">
                <el-input style="width:300px" v-model="ruleForm.userName" clearable></el-input>
              </el-form-item>

              <el-form-item label="项目编号/预算编码：" prop="code" label-width="152px">
                <el-input style="width:298px" v-model="ruleForm.code" clearable></el-input>
              </el-form-item>

              <el-form-item label="合同金额(万元)：" prop="userMoney" label-width="150px">
                <el-input-number style="width:300px" v-model="ruleForm.userMoney" placeholder="请输入合同金额(万元)" controls-position="right" :min="0" clearable></el-input-number>
                <!--<el-input type="number" v-model="ruleForm.userMoney" clearable></el-input>-->
              </el-form-item>

              <el-form-item label="分包方式：" prop="second" label-width="150px">
                <el-select
                  v-model="ruleForm.seconds"
                  placeholder="全部"
                  style="width:300px"
                >
                  <el-option value="1" label="挂靠分包"></el-option>
                  <el-option value="2" label="单价分包"></el-option>
                </el-select>
              </el-form-item>

            <!--  <el-form-item label="降点数：" prop="count" label-width="150px">
                <el-input v-model="ruleForm.count" clearable></el-input>
              </el-form-item>-->

              <!-- 时间 -->

              <el-form-item label="签订时间：" prop="date1" label-width="150px" required>
                <el-date-picker
                  style="width:300px"
                  v-model="ruleForm.date1"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="开工时间：" prop="date3" label-width="150px" required>
                <el-date-picker
                  style="width:300px"
                  v-model="ruleForm.date3"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="完工时间：" prop="date2" label-width="150px" required>
                <el-date-picker
                  style="width:300px"
                  v-model="ruleForm.date2"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="合同附件：" label-width="150px">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="/api/web/proContract/ProContractFile"
                  :headers="myheader"
                  :file-list="fileList"
                  :auto-upload="true"
                  :data="FileObject"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :limit="1"
                  :on-success="handChange"
                   :multiple="true"
                >
                  <el-button
                    size="small"
                    type="primary"
                    style=" width: 300px;height: 40px;border: 1px solid #e4e4e4;"
                  >选择上传文件</el-button>
                </el-upload>
              </el-form-item>
              <!--accept=".jpg,.jpeg,.png,.pdf,.dwg,.xls,.xlsx,.doc,.docx,.JPG,.JPEG,.PNG,.PDF,.DWG,.XLS,.XLSX,.DOC,.DOCX,.zip,.rar"-->
              <div style="font-size: 12px;color: #ccc;margin-top: -10px;margin-left: 120px;margin-bottom: 12px;">文件大小不能超过10M</div>
              <el-form-item style="margin-left: 100px;">
                <el-button type="primary" @click="submitForm('ruleForm')" style="width:180px">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "subContract",
  data() {
    return {
      myheader:{token:localStorage.getItem("token")},
      itemss: [],
      fileCode: {},
      fileList: [],
      FileObject: {
        bizType: "contract",
        parentId: this.$route.params.conId
    },
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked11: "0",
      checked22: "0",
      checked33: "0",
      checked44: "0",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      flag: 0,
      ruleForm: {
        one:"广州市景天通信技术有限公司",
        count: "",
        userName: "",
        userOrg: "",
        userOrg1: "",
        userMoney: "",
        userTruename: "",
        date1: "",
        date2: "",
        date3: "",
        type: [],
        seconds:'',
        code:''
      },
      items: [],
      newArray: {},
      rules: {
        date1: [

            { required: true, message: '请选择签订日期', trigger: 'blur' },
          ],
           date3: [

               { required: true, message: '请选择开工日期', trigger: 'blur' },
          ],
           date2: [

               { required: true, message: '请选择完工日期', trigger: 'blur' },
          ],
        userOrg: [
          {
            required: true,
            message: "请输入内部合同编号",
            trigger: "blur"
          },
                 { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }

        ],
        userOrg1: [
          {
            required: true,
            message: "请输入分包合同编号",
            trigger: "blur"
          },
           { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }

        ],
        userName: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "blur"
          },
                 { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }

        ],
        userMoney: [
          {
            required: true,
            message: "请输入合同金额且为正数",
            trigger: "blur"
          }

        ],
        count: [
          {
            required: true,
            message: "请输入降点数",
            trigger: "blur"
          },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        seconds:[
          {required: true, message: "请输入降点数",trigger: "blur"},
        ],
        code: [
          {required: true,message: "请输入编码",trigger: "blur"},
          {min: 1,max: 100,message: "长度在 1 到 100 个字符",trigger: "blur"}
        ],
      }
    };
  },
  created() {
  },
  mounted(){
    this.getIdd();
    this.subCompany(); // 调用获取乙方分包数据
  },
  methods: {
      // 获取框架合同
      getIdd(){
        let that = this;
        let suCb = res => {
          console.log(res);
          console.log(res.data.data);
          that.items = res.data.data

        }
        let erCb = res => {
          console.log(res);
        }
        let params = {type:'F'};
        let req = {
          url: "/api/web/proContract/getNoByConType",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
        that.$https(req);

      },


    // 获取乙方公司
    subCompany() {
      let that = this;
      let suCb = res => {
        console.log(res);
        that.itemss = res.data.data;
        console.log(res.data.data);
      };
      let erCb = res => {
        console.log(res);
      };
      let params = {};
      let req = {
        url: "/api/web/proContract/getSubcontractor",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },
    // 上传成功
    handChange(res,file, fileList){
      if(res.flag=="0"){
          this.$msg("请选择自定义文件类型上传！")
          this.fileList=[]
      }else if(res.flag=="1"){
        this.fileCode = fileList[0].response;
        this.fileList = fileList
        console.log(fileList[0].response);
      }
    },
    handleRemove(file, fileList) {
      if(file.status == "success"){
        let params = {
          fileUrl: this.fileCode.fileUrl,
          parentId: this.$route.params.conId
        };
        let suCb = res => {
          this.fileList = [];
        };
        let req = {
          url: "/api/web/sysFile/deleteFile",
          methods: "post",
          data: params,
          success: suCb,
        };
        this.$https(req);
      }else{
        this.fileList = [];
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
//      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isLt2M;
    },
    clickMe(index) {
      this.flag = index;
      localStorage.setItem("flags", index);
    },

    changes() {
      this.newArray = this.items.find(item => {
        if (item.conId === this.ruleForm.userTruename) {
          return item;
        }
      });
      console.log(this.newArray);
    },
    submitForm(formName) {
      // 请求前调用赋值
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.ruleForm.date3>=this.ruleForm.date1 && this.ruleForm.date3<=this.ruleForm.date2){
            if(this.fileList.length>0) {
              let that = this;
              let suCb = res => {
                console.log(res);
                console.log("分包成功");

                this.$router.push({
                  name: "contractList"
                });
                that.$msg("提交成功！");
              };
              let erCb = res => {
              };
              let params = {
                proContract: {
                  conId: that.$route.params.conId,
                  conType: "5",//合同类型（1-框架合同、2-框架内虚拟合同、3-框架内子合同、4-单向合同5-外包合同）
                  parentId: that.newArray.conId,// 所属框架合同编号  父级Id
                  conPartya: "8ff0-1130-4c97-91c8-a532a51e75fd",//甲方公司Id
                  conPartyb: that.ruleForm.second,//乙方公司Id
                  conOuterno: that.ruleForm.userOrg1,//合同外部编号
                  conInnerno: that.ruleForm.userOrg,//合同内部编号
                  conName: that.ruleForm.userName,//合同名字
                  conMoney: that.ruleForm.userMoney,//合同金额
                  subpackageWay: that.ruleForm.seconds,//分包方式，1-挂靠分包，2-单价分包
                  signDate: that.ruleForm.date1 + "",//签订时间
                  finishDate: that.ruleForm.date2 + "",//完工时间
                  startDate: that.ruleForm.date3 + "",//开始时间
                  proNo: that.ruleForm.code,//项目编码
                  /*conDroppoint: that.ruleForm.count,
                   prepayFlag: that.checked11,
                   prepayRemind: that.ruleForm.input1,
                   processFlag: that.checked22,
                   processRemind: that.ruleForm.input2,
                   finishFlag: that.checked33,
                   finishRemind: that.ruleForm.input3,
                   qualityFlag: that.checked44,*/
                }
              };
              console.log(params.proContract);
              let req = {
                url: "/api/web/proContract/addContract",
                methods: "post",
                data: params,
                success: suCb,
                error: erCb
              };
              that.$https(req);
            }else{
              this.$erMsg('请先上传文件')
            }
          }else{
            this.$erMsg('开工时间应大于签订时间且小于完工时间')
          }
        } else {
          this.$erMsg("请按红色字的提示进行修改完善")
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.component-main {
  width: 1102px;
  /* height: 1400px; */
  margin: 0 auto;
  margin-top: 49px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
}

.component-main-left {
  width: 180px;
  height: 1301px;
  border: 1px solid #e4e4e4;
  padding-top: 50px;
  float: left;
  border-top: none;
}

.box1 {
  position: relative;
  width: 175px;
  height: 50px;
  text-align: left;
  line-height: 50px;
  background-color: #9ea7b4;
  color: #fff;
  padding-left: 5px;
}

.box1 .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -40px;
  left: 180px;
  border-width: 25px 0 25px 25px;
  border-style: solid;
  border-color: transparent transparent transparent #9ea7b4;
  /*透明 透明 透明 灰*/
  margin: 40px auto;
}

/* 表单部分 */

.component-main-right {
  height: 1250px;
  float: right;
  width: 918px;
  margin: 0 auto;
  border-top: none;
  padding-top: 100px;
  border-bottom: 1px solid #e4e4e4;

  border-right: 1px solid #e4e4e4;
}

.box {
  width: 500px;
  margin: 0 auto;
}

.box .el-button--primary {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}

.box .el-form-item {
  width: 450px;
}

.el-form-item .el-form-item__label {
  width: 110px;
}

.el-form-item__content {
  margin-left: -103px;
}

.one {
  display: inline-block;
  width: 164px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
}

.main-input {
  width: 90px;
  height: 40px;
  border: 1px solid #e4e4e4;
  margin-left: -4px;
  border-left: none;
}

.two {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
  border-left: none;
  margin-left: -4px;
}
</style>
